<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <title>文件上传</title>
</head>

<body>
  <div id="app" v-cloak>
    <el-row class="header">
      <el-col :span="6">
        <img src="../images/aeec_logo.png" height="60" alt="黎阳LOGO" />
      </el-col>
      <el-col :span="12" class="header-title">
        文件上传
      </el-col>
    </el-row>
    <el-form :inline="true" :model="info" ref="infoRef" style="padding: 10px" :label-position="'left'">
      <el-form-item label="文件保存路径:" prop="path">
        <el-input style="width: 600px;" v-model="info.path" disabled="true">
        </el-input>
      </el-form-item>
      <el-upload style="width:500px;" action="../handler/board/Upload.ashx?action=upload" ref="upload" multiple
        :before-remove="beforeRemove" :file-list="fileList" :data="info" :on-success="success" :on-error="error"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary" plain>选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" plain @click="submitUpload">
          上传文件
        </el-button>
        <span style="color:red;font-weight:bold;margin-left: 10px;">内部系统，严禁上传涉密信息</span>
      </el-upload>
    </el-form>
  </div>

  <script type="module">
    import { getParams } from '../Scripts/hooks/useCommonMethod.js'
    const app = new Vue({
      el: '#app',
      data: {
        info: { path: 'Files' },
        fileList: []
      },
      methods: {
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${file.name}?`);
        },
        // 上传成功后
        success(response, file, fileList) {
          if (response.status === 200) {
            this.$message.success(response.msg)
          } else {
            this.$message.error(response.msg)
          }
        },
        error(err, file, fileList) { },
        submitUpload() {
          this.$refs.upload.submit();
        }
      }
    })
  </script>
</body>

</html>